<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	  <title>发布知识</title>
    <meta name="renderer" content="webkit"/> 
    <meta name="force-rendering" content="webkit"/> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> 
    <link rel="stylesheet" type="text/css" href="/static/css/hw-admin.css">
	<link rel="stylesheet" href="/static/css/k-style.css">
	<link rel="stylesheet" href="/static/css/my.css">
</head>
<body style="background:#fff;">
 	<div class="hw-header-wrapper">
		    <div class="hw-header">
		        <div class="hw-header__item--left">
            发布知识
		        </div>
		    </div>
	</div>
  <form id="table-form" method="post" action="" style="background:#fff">
    <div class="hw-group">
    <div class="group-title">基本信息</div>
     <div class="group-info">
      <div class="group-item">
            <div class="hw-input-label" >
                <div class="name"><span>*</span>知识名称</div>
                <div class="form-control" style="height:48px;">
                    <input class="hw-input" type="text"  name="name"  maxlength="16" value="<?=isset($find['name']) ? $find['name'] : ''?>" required placeholder="请输入内容" >
                </div>
            </div>
      </div>
    <div class="group-item">
        </div>
        <div class="group-item">
            <div class="hw-input-label">
                <div class="name"><span>*</span>知识分类</div>
                <div class="form-control">
                    <label class="hw-select">
                       <input class="hw-input" name="type" type="type"  readonly  placeholder="请选择分类">
                        <div class="select-options">
                            <div class="option <?=isset($find['type']) && $find['type'] == 0 ? 'selected' : '' ?>" data-value="0" style="text-align:left;padding-left:40px"><span>台词</span></div>
                            <div class="option <?=isset($find['type']) && $find['type'] == 1 ? 'selected' : '' ?>" data-value="1" style="text-align:left;padding-left:40px"><span>音乐</span></div>
                            <div class="option <?=isset($find['type']) && $find['type'] == 2 ? 'selected' : '' ?>" data-value="2" style="text-align:left;padding-left:40px"><span>案列</span></div>
                        </div>
                    </label>
                </div>
            </div>
        </div>
      <div class="group-item">
          <div class="hw-input-label">
          <div class="name"><span></span>知识介绍</div>
            <div class="form-control" style="width:800px;height:200px;">
              <textarea class="hw-textarea " name="info" value="" placeholder="请输入内容"  style="resize:none;height: 100%;" ><?=isset($find['info']) ? $find['info'] : '' ?></textarea>
            </div>
          </div>
        </div>   
      <div class="group-item">
            <div class="hw-input-label">
            <div class="name"><span></span>知识类型</div>
            <div class="form-control newsoringin"  style="width:800px;">
              <label for="radio" class="hw-checkbox__label" > 
                 <input type="radio" name="txt_type" value="0" class="hw-checkbox__input imgup" checked>
                 <i class="iconfont">&#xe62f;</i>
                 <i class="iconfont">&#xe630;</i>  
                 <span>图片</span>
              </label>
              <label for="radio" class="hw-checkbox__label" > 
                 <input type="radio" name="txt_type" value="1" class="hw-checkbox__input  videoup" <?=isset($find['txt_type']) && $find['txt_type'] == 1 ? 'checked' : '' ?>>
                 <i class="iconfont">&#xe62f;</i>
                 <i class="iconfont">&#xe630;</i>  
                <span>视频</span>
              </label>
              <label for="radio" class="hw-checkbox__label" > 
                 <input type="radio" name="txt_type" value="2" class="hw-checkbox__input fileup" <?=isset($find['txt_type']) && $find['txt_type'] == 2 ? 'checked' : '' ?>>
                 <i class="iconfont">&#xe62f;</i>
                 <i class="iconfont">&#xe630;</i>  
               <span>文档</span>
              </label>
            </div>
        </div>
      </div>
     </div>
     <!-- 上传图片 -->
  <div class="group-item imgwrap" style="display:<?=isset($find['txt_type']) ? ($find['txt_type'] == 0 ? 'block' : 'none') : 'block'; ?>">
      <div class="group-item">
          <div class="hw-input-label">
          <div class="name">上传图片</div>
           <div class="form-control">
                <div class="hw-img-lists property-img imglist" data-input-name="logo">
                  <?php if (isset($img) && !empty($img)): ?>
                    <?php foreach ($img as $key => $value): ?>
                      <div class="list">
                        <img src="<?=$value['url'] ?>" alt="logo">
                        <div class="operate">
                        <i class="hw-iconfont preview-img iconfont" >&#xe615;</i>
                        <i class="hw-iconfont iconfont delete-img">&#xe65f;</i>
                        </div>
                        <div class="musk"></div>
                        <input type="hidden" name="img[]" value="<?=$value['id'] ?>">
                      </div>
                    <?php endforeach ?>
                      <label for="file-input" class="add-file-btn cover-img" style="margin-top:4px; display: <?=count($img) != 9 ? 'block' : 'none'; ?>">+</label>
                      <span class="tip"></span>
                  <?php else: ?>
                    <label for="file-input" class="add-file-btn cover-img" style="margin-top:4px;">+</label>
                    <span class="tip"></span>
                  <?php endif ?>
                </div>
          </div>
         </div>
       </div>
       <div class="group-item">
          <div class="hw-input-label">
              <div class="name"></div>
              <div  class="form-control" style="width:340px;line-height:24px;color:#ccc;">
                   只能上传.jpg/.jpeg/.png文件，且不超过9张;每张图片不超过5M
              </div>
          </div>
       </div>
    </div>
  <!-- 上传附件 -->
    <div class="group-item filewrap" style="display:<?=isset($find['txt_type']) ? ($find['txt_type'] == 2 ? 'block' : 'none') : 'none'; ?>">
        <div class="hw-input-label">
            <div class="name">上传附件</div>
            <div class="form-control">
                <div class="upload-document-wrap">
                    <div class="upload-document-list before">
                        <?php if (isset($file) && !empty($file)): ?>
                          <div class="before-upload">
                              <div class="upload-content">
                                  <label for="" class="hw-btn--default upload-btn upload-btn-file">重新上传</label>
                                  <p class="grey text">(只能上传 .doc/.pdf文件，且不超过 5M）</p>
                              </div>
                          </div>
                          <!-- 文件上传链接 -->
                          <?php foreach ($file as $key => $value): ?>
                           <input type="hidden" class="fileurl" name="file[]" value="<?=$value['id'] ?>">  
                            <div class="on-upload " style="display:block">
                                <div class="document-info" >
                                    <span class="uploadname"><?=$value['file_name'] ?></span>
                                    <a href="<?=$value['url'] ?>" style="float:right;" class="downloadurl">下载</a>
                                </div>
                            </div>
                          <?php endforeach ?>
                        <?php else: ?>
                          <div class="before-upload">
                              <div class="upload-content">
                                  <label for="" class="hw-btn--default upload-btn upload-btn-file">点击上传</label>
                                  <p class="grey text">(只能上传 .doc/.pdf文件，且不超过 5M）</p>
                              </div>
                          </div>
                          <!-- 文件上传链接 -->
                         <input type="hidden" class="fileurl" name="file[]">  
                          <div class="on-upload " style="display:none">
                              <div class="document-info" >
                                  <span class="uploadname"></span>
                                  <a href=""  style="float:right;" class="downloadurl">下载</a>
                              </div>
                          </div>
                        <?php endif ?>
                    </div> 
                </div>
            </div>
        </div>
    </div>
    <!-- 视频链接 -->
    <div class="videwrap" style="display:<?=isset($find['txt_type']) ? ($find['txt_type'] == 1 ? 'block' : 'none') : 'none'; ?>">
      <div  class="group-item">
         <div class="hw-input-label">
          <div class="name"><span></span>上传视频</div>
            <div class="form-control" >
                 <input class="hw-input viedeolink" type="text"  name="video_url" value="<?=isset($find['video_url']) ? $find['video_url'] : '' ?>" required placeholder="请输入视频链接，仅支持腾讯视频链接" >
            </div>
          </div>
      </div>
      <div class="group-item">
          <div class="hw-input-label">
          <div class="name">上传封面</div>
           <div class="form-control">
                <div class="hw-img-lists property-img videoimg" data-input-name="logo">
                    <?php if (isset($cover) && !empty($cover)): ?>
                      <div class="list">
                        <img src="<?=$cover['url'] ?>" alt="logo">
                        <div class="operate">
                        <i class="hw-iconfont preview-img iconfont" >&#xe615;</i>
                        </div>
                        <div class="musk"></div>
                        <input type="hidden" name="cover" value="<?=$cover['id'] ?>">
                      </div>
                      <label for="file-input" class="add-file-btn cover-file" style="font-size:15px;">修改</label>
                    <?php else: ?>
                      <label for="file-input" class="add-file-btn cover-file" style="margin-top:4px;">+</label>
                      <span class="tip"></span>
                    <?php endif ?>
                </div>
          </div>
         </div>
       </div>
       <div class="group-item">
          <div class="hw-input-label">
              <div class="name"></div>
              <div  class="form-control" style="width:340px;line-height:24px;color:#ccc;">
                   只能上传.jpg/.jpeg/.png文件，只能传一张;图片大小不超过5M
              </div>
          </div>
       </div>      
    </div>  
    </div>
    <input type="hidden" name="state" value="<?=isset($find['state']) ? $find['state'] : '0' ?>" id="state">
     <div class="group-operate"  style="">
        <div class="hw-container">

            <a class="hw-btn hw-default-btn" href="javascript:history.back(-1)">取消</a>
            <button class="hw-btn" type="submit" id="save">保存</button>
             <button class="hw-btn" type="submit" id="public">发布</button>
        </div>
    </div>
 </form>
<script type="text/javascript" src="/static/lib/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/static/lib/jquery.form.min.js"></script>
<script type="text/javascript" src="/static/lib/jquery.validate.js"></script>
<script type="text/javascript" src="/static/lib/messages_zh.js"></script>
<script type="text/javascript" src="/static/js/common/util.js"></script>
<script type="text/javascript" src="/static/js/common/common.js"></script>
<script type="text/javascript" src="/static/js/common/upload.js"></script>
<script>
var mainForm = $('#table-form');
mainForm.validate();
mainForm.on("submit",function(){
  if(mainForm.valid()){
    var val=$(":checked").val()
    if(val=="0"){//图片
        if($(".imglist").find(".list").length==0){
               $.alert('请上传图片');  
               return false
        }
    }
    if(val=="1"){
      if($(".videoimg").find(".list").length==0){
              $.alert('请上传封面');
               return false
      }
    }
    if(val=="2"){
      if(!$(".uploadname").text()){
          $.alert('请上传附件');
          return false  
      }
    }
  }
})
//保存
$("#save").click(function(){
  $("#state").val("0")

})
//发布
$("#public").click(function(){
  $("#state").val("1")
})
//上传封面
 new Upload({
   elem: '.cover-file',
   url: '/Api/Upload/ajax_uploadFile',
   name: 'file',
   accept:" image/jpeg, image/png",
   formId: 'upload-form',
   inputId: 'file-upload-input',
   success: function(json) {
     if (json.code == 1) {
       this.btn.parent().find(".list").remove();
       var txt='<div class="list">'+
                   '<img src="'+json.url+'" alt="">'+
                   '<div class="operate">'+
                     '<i class="iconfont preview-img" style="left:33px;">&#xe615;</i>'+
                   '</div>'+
                   '<div class="musk"></div>'+
                   '<input type="hidden" name="cover" value="'+json.file_id+'">'+
                 '</div>';
       this.btn.before(txt);
       $.alert('上传成功');
       this.btn.text("修改");
       this.btn.css({fontSize:"15px"});
     }
   },
   error: function() {
     $.alert('上传失败');
   }
 });
/**
 * @Author   Hh
 * @DateTime 2017-12-15
 * @return   hhUI配套js
 */

 // 动态生成select小三角和显示值的div
 $('.hw-select').append('<div class="show-option"></div><i class="iconfont">&#xe619;</i>');
 // 动态生成selec option 选中的小图标
 $('.hw-select .option').append('<i class="iconfont">&#xe613;</i>');

 // 动态生成搜索icon
 $('.hw-search').append('<button class="search-btn"><i class="iconfont">&#xe6f4;</i></button>');

  // 动态生成搜索icon，但是点击不提交
 $('.hw-search-prevent').append('<div class="search-btn"><i class="iconfont">&#xe6f4;</i></div>');

 // 动态生成加减icon
 $('.hw-compute').append('<div class="add-btn">+</div><div class="subtract-btn">-</div>');

 // 动态生成时间icon
 $('.hw-time').append('<div class="search-btn"><i class="hw-iconfont">&#xe64a;</i></div>');

 // 动态生成日期icon
 $('.hw-date').append('<div class="search-btn"><i class="hw-iconfont">&#xe600;</i></div>');

 // 动态生成编辑icon
 $('.hw-edit').append('<div class="search-btn"><i class="hw-iconfont">&#xe605;</i></div>');

 // 动态生成删除icon
 $('.hw-delete').append('<div class="search-btn"><i class="hw-iconfont">&#xe65f;</i></div>');

/* 更多筛选条件 */
$('body').on('click', '.filter-switch', function() {
  $('.filter-detail').toggle();
});

// 已经筛选的状态
if ($('.filter-switch').data('status')) {
  $('.filter-switch').trigger('click');
}
 
// 重置
$('body').on('click', '#reset-filter-btn', function() {
  $(this).parents('.filter-detail').find('input').val('');
});

/*modal */
//显示modal
// $('body').on('click', '[data-toggle="modal"]', function() {
//   $($(this).data('target')).modal();
// });
// 隐藏modal
// $('body').on('click', '[data-dismiss="modal"], .modal-mask', function() {
//   $('.modal').modal('hide');
// });


// ie8不用插件(selectivizr.js)不兼容css3 :checked
// 默认选中的checkbox、radio
$.each($('.hw-checkbox input, .hw-radio input'), function() {
  if ($(this).prop('checked')) {
    $(this).parent().addClass('checked');
  }
});

// 多选
$('body').on('change', '.hw-checkbox input', function() {
  if ($(this).prop('checked')) {
    $(this).parent().addClass('checked');
  } else {
    $(this).parent().removeClass('checked');
  }
});
// 单选
$('body').on('change', '.hw-radio input', function() {
  var _this = $(this);
  $.each($('.hw-radio input'), function() {
    if ($(this).attr('name') == _this.attr('name')) {
      $(this).parent().removeClass('checked');
    }
  });
  _this.parent().addClass('checked');
});

//全选
var checkAll, checkOne;
if ($('.fixed-column').length) {
  checkAll = '.fixed-left .check-all';
  checkOne = '.fixed-left .check-one';
} else {
  checkAll = '.main-table-wrap .check-all';
  checkOne = '.main-table-wrap .check-one';
}

$('body').on('change', checkAll, function() {
  if ($(this).prop('checked')) {
    $(checkOne).each(function() {
      $(this).prop('checked', true);
      $(this).parent().addClass('checked');
    });
  } else {
    $(checkOne).each(function() {
      $(this).prop('checked', false);
      $(this).parent().removeClass('checked');
    });
  }
});

// 选中一条，判断是否全选
$('body').on('change', checkOne, function() {
    var judge = true;
    $(checkOne).each(function() {
      if (!$(this).prop('checked')) {
          judge = false;
          return false;
      }
    });
    if (judge) {
      $(checkAll).prop('checked', true);
      $(checkAll).parent().addClass('checked');
    } else {
      $(checkAll).prop('checked', false);
      $(checkAll).parent().removeClass('checked');
    }
});



// // 给hw-select默认赋值
$.each($('.hw-select'), function() {
  // 没有默认选中的值
  if (!$(this).find('.option.selected').length) {
    $(this).find('.option').eq(0).addClass('selected');
  }
  $(this).find('.show-option').text($(this).find('.option.selected span').text());
  $(this).find('input').val($(this).find('.option.selected').data('value'));
});

// // select-options显示隐藏
// $('body').on('click', '.hw-select', function(e) {
//   var selectOptions = $(this).find('.select-options');
//   if (selectOptions.css('display') == 'none') {
//     selectOptions.slideDown();
//     // 如果下拉菜单过长，出现滚动条
//     if ($(this).find('.option').length >= 8) {
//       selectOptions.css('overflow-y', 'scroll');
//     }
//   } else {
   
//   }
// });
// 选择option（使用click事件，如果点击按住的时间过长，会造成blur时间先于click事件触发）
$('body').on('mousedown click', '.select-options .option', function() {
  $(this).siblings().removeClass('selected');
  $(this).addClass('selected');
  $(this).parent().siblings('input').val($(this).data('value'));
  $(this).parent().siblings('.show-option').text($(this).find('span').text());
});
// hw-select失去焦点， 隐藏slect-options
$('body').on('blur', '.hw-select', function() {
  var selectOptions = $(this).find('.select-options');
  selectOptions.slideUp();
});

  new Upload({//logo上传
   elem: '.cover-img',
   url: '/Api/Upload/ajax_uploadFile',
   name: 'file',
   accept:" image/jpeg, image/png",
   formId: 'upload-form',
   inputId: 'file-upload-input',
   success: function(json) {
     if (json.code == 1) {
      if($(".imglist").find(".list").length==8){
                  var txt='<div class="list">'+
                     '<img src="'+json.url+'" alt="">'+
                     '<div class="operate">'+
                       '<i class="iconfont preview-img">&#xe615;</i>'+
                       '<i class="iconfont delete-img">&#xe65f;</i>'+
                     '</div>'+
                     '<div class="musk"></div>'+
                     '<input type="hidden" name="img[]" value="'+json.file_id+'">'+
                   '</div>';
         this.btn.before(txt);
         $.alert('上传成功');  
         $(".cover-img").hide();
      }
      else{
          var txt='<div class="list">'+
                     '<img src="'+json.url+'" alt="">'+
                     '<div class="operate">'+
                       '<i class="iconfont preview-img">&#xe615;</i>'+
                       '<i class="iconfont delete-img">&#xe65f;</i>'+
                     '</div>'+
                     '<div class="musk"></div>'+
                     '<input type="hidden" name="img[]" value="'+json.file_id+'">'+
                   '</div>';
         this.btn.before(txt);
         $.alert('上传成功');       
      }

     }
   },
   error: function() {
     $.alert('上传失败');
   }
 });
//附件上传
new Upload({
  elem: 'upload-btn-file',
  url: '/Api/Upload/ajax_uploadFile',
  name: 'file',
  accept:"application/msword,application/pdf",
  formId: 'upload-form',
  inputId: 'file-upload-input',
  success: function(json) {
     $(".upload-btn-file").text("重新上传")
     $(".fileurl").val(json.file_id)
     $(".on-upload ").show();
     $(".uploadname").text(json.filename)
     $(".downloadurl").attr("href",json.url)
     $.alert('上传成功');  
  },
  error: function(err) {
       console.log(err)
  }
});
//上传切换
$(".imgup").click(function(){
$(".viedeolink").val("")//清空链接
//清空附件
$(".upload-btn-file").text("点击上传")
$(".fileurl").val("")
$(".on-upload ").hide();
$(".uploadname").text("")
$(".downloadurl").attr("href","")
$(".imgwrap").show()
$(".videwrap").hide()
$(".filewrap").hide()
})
$(".videoup").click(function(){
$(".list").remove()//清空图片
//清空附件
$(".upload-btn-file").text("点击上传")
$(".fileurl").val("")
$(".on-upload ").hide();
$(".uploadname").text("")
$(".downloadurl").attr("href",'')
$(".imgwrap").hide()
$(".videwrap").show()
$(".filewrap").hide()
$(".cover-file").text("+")
$(".cover-file").css({fontSize:"40px"});
})
$(".fileup").click(function(){
$(".viedeolink").val("")//清空链接
$(".cover-file").text("+")
$(".cover-file").css({fontSize:"40px"});
$(".list").remove()//清空图片
$(".imgwrap").hide()
$(".videwrap").hide()
$(".filewrap").show()
})
</script>
</body>
</html>